<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 这个CSS规则将在全选复选框处于不确定状态时改变其背景色为浅灰色。 */
        #check-all:indeterminate {
            /* 不能直接设置背景颜色等属性 */
            position: relative;

        }

        #check-all:indeterminate::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 10px;
            height: 6px;
            background-color: rgb(214, 187, 34);
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div>
        <input type="checkbox" id="check-all">
        <label for="check-all">全选/全不选</label>
    </div>
    <div>
        <input type="checkbox" class="checkbox-item" id="checkbox-item1">
        <label for="checkbox-item1">选项1</label>
    </div>
    <div>
        <input type="checkbox" class="checkbox-item" id="checkbox-item2">
        <label for="checkbox-item2">选项2</label>
    </div>
    <div>
        <input type="checkbox" class="checkbox-item" id="checkbox-item3">
        <label for="checkbox-item3">选项3</label>
    </div>

    <script>

        /* 在这个JavaScript代码中：
        当任何单个复选框的状态改变时，都会调用 updateCheckAll 函数来更新全选复选框的状态。
        如果所有单个复选框都被选中，全选复选框也会被选中；如果只选中了部分复选框，全选复选框将显示为不确定状态；
        如果没有选中任何复选框，全选复选框将被取消选中。 */
        document.addEventListener('DOMContentLoaded', function () {
            var checkAll = document.getElementById('check-all');
            var checkboxes = document.querySelectorAll('.checkbox-item');

            function updateCheckAll() {
                var checkedCount = 0;
                checkboxes.forEach(function (checkbox) {
                    if (checkbox.checked) checkedCount++;
                });
                checkAll.checked = checkedCount === checkboxes.length;
                // checkAll.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
            }

            checkAll.addEventListener('change', function () {
                checkboxes.forEach(function (checkbox) {
                    checkbox.checked = checkAll.checked;
                });
                // checkAll.indeterminate = false;
            });

            checkboxes.forEach(function (checkbox) {
                checkbox.addEventListener('change', updateCheckAll);
            });
        });

    </script>
</body>

</html>